<template>
	<scroll-view scroll-y @scrolltolower="handleHotImg"  class="home-recomment">
		<!-- 推荐开始 -->
		<view class="recomment">
				<navigator v-for="(item,index) in recomment" :key="item.id" class="recommentImg" :url="`/pages/abnumdetail/index?id=${item.target}`">
					<image :src="item.thumb"></image>
				</navigator>
		</view>
		<!-- 推荐结束 -->
		<!-- 月份开始 -->
		<view class="moneth">
			<view class="moneth_title">
					<view class="moneth_title-info">
						<text>{{moneth.DD}}/</text>
						{{ moneth.MM}}月
						<text class="moneth_title-text">
							{{moneth.title}}
						</text>
					</view>
					<view class="more">
						更多
						<text class="iconfont icon icon-arrow-right"></text>
						<text class="iconfont icon icon-arrow-right"></text>
					</view>
			</view>	
			<view class="moneth-content">
					<view class="monethImg" v-for="(item,index) in moneth.items" :key="item.id" >
							<go-detail :list="moneth.items" :index="index">
								<image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
							</go-detail>	
					</view>
			</view>
		</view>
		<!-- 月份结束 -->
		<!-- 热门开始 -->
			<view class="hot">
					<view class="hot_title">
						热门
					</view>
					<view class="hot_content">
						<view class="hot_img" v-for="(item,index) in hot" :key="item.id">
							<go-detail :list="hot.items" :index="index">
								<image :src="item.thumb" mode="widthFix"></image>
							</go-detail>	
						</view>
					</view>
					
			</view>
		<!-- 热门结束 -->
	</scroll-view>
</template>

<script>
	import moment from 'moment'
	import goDetail from '../../commpoent/goDetail.vue'
	export default{
		components:{
			goDetail
		},
		data(){
			return{
				// 推荐数据
				recomment:[],
				// 月份数据
				moneth:{},
				// 热门数据
				hot:[],
				params:{
					limit:30,
					order:'hot',
					skip:0
				},
				// 是否还有数据
				haveMore:true
			}
		},
		mounted(){
			this.getList()
		},
		methods:{
			handleHotImg(){
				if(this.haveMore){
					this.params.skip = this.params.skip + 30
					this.getList()
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:'none'
					})
				}
			
			},
			getList(){
				console.log(this.params)
				this.request({
					url:'http://157.122.54.189:9088/image/v3/homepage/vertical',
					data:this.params
				})
				.then( res => {
					if(res.data.res.vertical.length === 0){
						return this.haveMore = false
					}
					if(this.recomment.length === 0){
						// 推荐数据
						this.recomment = res.data.res.homepage[1].items
						// 月份数据
						this.moneth = res.data.res.homepage[2]
						this.moneth.MM = moment(this.moneth.stime).format('MM')
						this.moneth.DD = moment(this.moneth.stime).format('DD')
					}
					// 热门数据
					this.hot = [...this.hot,...res.data.res.vertical]
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home-recomment{
		height: calc(100vh - 36px);
		.recomment{
			margin-top:10px;
			display: flex;
			flex-wrap:wrap;
			.recommentImg{
				width: 50%;
				image{
					width: 100%;
					border: 5rpx solid #fff;
					height: 120px;
				}
			}
		}
		.moneth{
			.moneth_title{
				display: flex;
				justify-content: space-between;
				color:$color;
				font-size: 30rpx;
				font-weight: 600;
				margin: 0 20rpx;
				.moneth_title-info{
					text{
						font-size: 36rpx;
					}
					.moneth_title-text{
						margin-left:30rpx;
						font-size:36rpx;
						color:#666;
					}
				}
			}
			.moneth-content{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				.monethImg{
					width: 200rpx;
					flex: 1;
					image{
						border: 5px solid #fff;
					}
				}
			}
		}
		.hot{
			.hot_title{
				margin-left: 10rpx;
				font-size: 34rpx;
				padding-left: 10rpx;
				border-left: 16rpx solid $color;
				color:$color;
				font-weight: 600;
			}
			.hot_content{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				.hot_img{
					width:33%;
					flex: 1;
					height: 450rpx;
					image{
						border: 5rpx solid #fff;
					}
				}
			}
		}
	}
</style>
